<template>
  <a-spin :spinning="loading">
    <a-row>
      <a-col :md="24" :lg="12" :xl="12" :xxl="8">
        <a-descriptions title="订单金额" :column="2" style="margin-top:10px">
          <a-descriptions-item label="订单金额">{{accountItem.invoicedAmount}}</a-descriptions-item>
          <a-descriptions-item label="币种">{{accountItem.currency}}</a-descriptions-item>
          <a-descriptions-item label="原价" :span="2">{{accountItem.subtotal}}</a-descriptions-item>
          <a-descriptions-item label="优惠">{{accountItem.discountAmount}}</a-descriptions-item>
          <a-descriptions-item label="优惠代码">{{accountItem.discountCode}}</a-descriptions-item>
          <a-descriptions-item label="运费" :span="2">{{accountItem.deliveryAmount}}</a-descriptions-item>
          <a-descriptions-item label="国税">{{accountItem.countryTaxAmount}}</a-descriptions-item>
          <a-descriptions-item label="VAT">{{accountItem.outputVatAmount}}</a-descriptions-item>
          <a-descriptions-item label="州税" :span="2">{{accountItem.regionTaxAmount}}</a-descriptions-item>
          <a-descriptions-item label="退款金额" :span="2">{{accountItem.totalTaxRefund == null ? "0.00" : accountItem.totalTaxRefund}}</a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :md="24" :lg="12" :xl="12" :xxl="8">
        <a-descriptions title="地址信息" :column="2" style="margin-top:10px">
          <a-descriptions-item label="国家">{{addressItem.shippingCountry}}</a-descriptions-item>
          <a-descriptions-item label="州">{{addressItem.shippingRegion}}</a-descriptions-item>
          <a-descriptions-item label="城市">{{addressItem.shippingCity}}</a-descriptions-item>
          <a-descriptions-item label="邮编">{{addressItem.shippingPostcode}}</a-descriptions-item>
          <a-descriptions-item :span="2" label="地址">
            <span>{{addressItem.shippingStreetLine1}}</span>
            <span v-if="addressItem.shippingStreetLine2">{{", "+addressItem.shippingStreetLine2}}</span>
          </a-descriptions-item>
          <a-descriptions-item label="姓名">{{addressItem.shippingCustName }}</a-descriptions-item>
          <a-descriptions-item label="电话">{{addressItem.shippingTelephone}}</a-descriptions-item>
          <a-descriptions-item label="邮箱">{{addressItem.shippingEmail}}</a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :md="24" :lg="12" :xl="12" :xxl="8">
        <a-descriptions title="归因结果" :column="1" style="margin-top:10px">
          <a-descriptions-item label="神策用户">
            {{orderSourceItem.sensorsUserId}}
          </a-descriptions-item>
          <a-descriptions-item label="自定义归因">
            {{orderSourceItem.protect?.source ? orderSourceItem.protect.source + "/" : ''}}
            {{orderSourceItem.protect?.medium ? orderSourceItem.protect.medium + "/": ''}}
            {{orderSourceItem.protect?.campaign ? orderSourceItem.protect.campaign : ''}}
          </a-descriptions-item>
          <a-descriptions-item label="首因">
            {{orderSourceItem.first?.source ? orderSourceItem.first.source + "/" : ''}}
            {{orderSourceItem.first?.medium ? orderSourceItem.first.medium + "/": ''}}
            {{orderSourceItem.first?.campaign ? orderSourceItem.first.campaign : ''}}
          </a-descriptions-item>
          <a-descriptions-item label="末因">
            {{orderSourceItem.latest?.source ? orderSourceItem.latest.source + "/" : ''}}
            {{orderSourceItem.latest?.medium ? orderSourceItem.latest.medium + "/": ''}}
            {{orderSourceItem.latest?.campaign ? orderSourceItem.latest.campaign : ''}}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :span="24">
        <span style="font-size: 18px; margin-top: 20px;font-weight: bold">商品信息</span>
        <common-table
            :columns="columns"
            :dataSource="goodsInfoItems"
            :scroll="{ x: 'max-content' }"
        >
        </common-table>
      </a-col>
    </a-row>
  </a-spin>
</template>
<script setup>
import { ref,defineProps } from "vue";
import CommonTable from "@/components/commonTable/index.vue";
import {getTabDetail} from "@/api/standard/index.js";
import {message} from "ant-design-vue";
import {useRoute} from "vue-router";
const columns = [
  {
    title: "原始SKU",
    dataIndex: "sourceSku",
    key: "sourceSku",
    align:"center"
  },
  {
    title: "平台SKU",
    dataIndex: "productSku",
    key: "productSku",
    align:"center"
  },
  {
    title: "数量",
    dataIndex: "qty",
    key: "qty",
    align:"center"
  },
  {
    title: "最早交货日期",
    dataIndex: "earliestDeliveryTime",
    key: "earliestDeliveryTime",
    align:"center"
  },
  {
    title: "最迟交货日期",
    dataIndex: "latestDeliveryTime",
    key: "latestDeliveryTime",
    align:"center"
  },
  {
    title: "物流服务",
    dataIndex: "specialService",
    key: "specialService",
    align:"center"
  },
  {
    title: "物流类型",
    dataIndex: "deliveryType",
    key: "deliveryType",
    align:"center"
  },
  {
    title: "结算总金额",
    dataIndex: "invoicedAllAmount",
    key: "invoicedAllAmount",
    align:"center"
  },
  {
    title: "币种",
    dataIndex: "currency",
    key: "currency",
    align:"center"
  },
  {
    title: "销售单价",
    dataIndex: "unitSalePrice",
    key: "unitSalePrice",
    align:"center"
  },
  {
    title: "优惠单价",
    dataIndex: "unitDiscountAmount",
    key: "unitDiscountAmount",
    align:"center"
  },
  {
    title: "物流单价",
    dataIndex: "unitDeliveryAmount",
    key: "unitDeliveryAmount",
    align:"center"
  },
  {
    title: "国税单价",
    dataIndex: "unitCountryTaxAmount",
    key: "unitCountryTaxAmount",
    align:"center"
  },
  {
    title: "州税单价",
    dataIndex: "unitRegionTaxAmount",
    key: "unitRegionTaxAmount",
    align:"center"
  },
  {
    title: "VAT单价",
    dataIndex: "unitOutputVatAmount",
    key: "unitOutputVatAmount",
    align:"center"
  },
  {
    title: "结算单价",
    dataIndex: "invoicedUnitAmount",
    key: "invoicedUnitAmount",
    align:"center"
  },
]
const loading = ref(false)
const accountItem = ref({})
const addressItem = ref({})
const goodsInfoItems = ref([])
const orderSourceItem = ref({})
const props = defineProps({
  orderId:{
    type:String,
    default:''
  },
  platform: {
    type: String,
    default: ''
  }
})
const init = async () => {
  try{
    loading.value = true
    const res = await getTabDetail({orderId:props.orderId})
    accountItem.value = res.result.accountItem
    goodsInfoItems.value = res.result.goodsInfoItems
    addressItem.value = res.result.addressItem
    orderSourceItem.value = res.result.orderSourceItem
  }catch(e){
    // message.error(e)
  }finally {
    loading.value = false
  }
}

defineExpose({
  init
})
</script>
<style scoped>
:deep(.ant-descriptions-row >td ) {
  padding: 1px;
}
</style>
